<!--
 * @Author: Bonnie
 * @Date: 2021-12-06 11:26:54
 * @LastEditTime: 2021-12-06 11:31:53
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/vue_transition/index.vue
-->
<template>
  <div class="root-container">
    <div id="databinding">
      <el-button :type="show?'warning':'success'" @click="show = !show">点我看效果</el-button>
      <div>变化效果为透明度<em class='underline'>{{show? '1 --> 0':'0 --> 1'}}</em> 的变化</div>
      <!-- name:fade 对应css中的fade开头的样式 -->
      <transition name="fade">
        <p class="p_style" v-show="show">动画实例</p>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      show: true
    };
  }
};
</script>
<style lang='scss' scoped>
.root-container {
  p {
    font-size: 30px;
    color: red;
  }
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
</style>